<template>
	<view class="login" v-if="isLogin">
		<view class="popup_shadow" @touchmove.prevent="" @tap="closeLogin"></view>
		<view class="login_content">
			<view style="margin-bottom: 20upx;">
				<view class="login_content_tab">
					<view class="login_content_tab_account " :class="type=='login'?'active':''" @click="gotype('login')">
						账号登录
					</view>
					<view class="login_content_tab_line"></view>
					<view class="login_content_tab_code" :class="type=='reg'?'active':''" @click="gotype('reg')">
						账号注册
					</view>
				</view>
				<view class="login_content_desc">
					{{desc}}
				</view>
			</view>
			
			<view class="login_content_inpbox">
				 <view class="login_content_inpbox_account"  v-if="type=='reg'">
					<view class="login_content_inpbox_account_title">
						姓名
					</view>
					<input type="text" placeholder="请输入真实姓名" v-model="login.name">
					
				</view>
				<!--
				<view class="login_content_inpbox_account" v-if="type=='reg'">
					<view class="login_content_inpbox_account_title">
						身份证号
					</view>
					<input type="text" placeholder="如不填写可能会影响账号找回" v-model="login.card">
					
				</view> -->
				<view class="login_content_inpbox_account">
					<view class="login_content_inpbox_account_title">
						<font color="red">*</font>账号
					</view>
					<input type="text" placeholder="请输入账号" v-model="login.username">
					<view class="login_content_inpbox_account_forget" v-if="type=='login'">
						忘记密码
					</view>
				</view>
				
				<view class="login_content_inpbox_password" v-if="type=='reg'" >
					<view class="login_content_inpbox_password_title">
						<font color="red">*</font>手机号
					</view>
					<input type="number" placeholder="请输入手机号" v-model="login.phone">
					<view v-if="type=='back'" :class="'login_content_inpbox_password'+codecolor+'_btn'" @click="getcode()">
						{{codetxt}}
					</view>
				</view>
				<view class="login_content_inpbox_account" v-if="type=='reg'">
					<view class="login_content_inpbox_account_title">
						<font color="red">*</font>推荐人
					</view>
					<input type="text" placeholder="请输入推荐人ID" v-model="login.puid">
					
				</view>
				
				<view class="login_content_inpbox_password">
					<view class="login_content_inpbox_password_title">
						<font color="red">*</font>密码
					</view>
					<input type="password" placeholder="请输入密码" v-model="login.password">
					<view class="login_content_inpbox_password_btn" v-if="type=='login'" @click="gologin()">
						登录
					</view>
				</view>
				<view class="login_content_inpbox_password" v-if="type=='reg'">
					<view class="login_content_inpbox_password_title">
						<font color="red">*</font>重复密码
					</view>
					<input type="password" placeholder="请再次输入密码" v-model="login.repassword">
					<view class="login_content_inpbox_password_btn" v-if="type=='login'">
						{{type=='login'?'登录':'注册'}}
					</view>
				</view>
				
				<view class="login_content_inpbox_password4_btn" @click="register()" style="margin-top: 10px;" v-if="type=='reg'">
					注册
				</view>
			</view>
			
			<view class="login_content_bottom">
				<label>
					<checkbox style="transform:scale(0.7)" :checked="checked" color="rgb(244, 67, 54)" /><text>我已阅读并遵守<text style="color: #f44336;">《用户协议》</text><text style="color: #f44336;">与</text><text style="color: #f44336;">《隐私协议》</text></text>
				</label>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"Login",
		data() {
			return {
				desc: "如果未注册，请点击账号注册新用户",
				checked: true,
				type:'login',
				codetxt:'获取验证码',
				codecolor:'2',
				init:120,
				login:{username:'',phone:'',code:'',password:'',puid:'',type:1,name:'',card:''},
				check:true
			};
		},
		computed: {
			isLogin(){
				return this.$store.state.isLogin
			}
		},
		created(options) {
			this.login.puid = options.puid;
			var that = this;
			var puid = uni.getStorageSync('puid');
			uni.showToast({
				title:puid
			})
			if(puid){
				that.$http('api/formatpuid',{puid:puid},function(res){
					that.login.puid = res.data.username;
				})
			}
			
		},
		methods: {
			closeLogin(){
				this.$store.commit("hideLogin")
			},
			gotype(type){
				this.type = type;
				if(this.type=='login'){
					this.desc = '如果未注册，请点击账号注册新用户'
				}else{
					this.desc = '如已注册，请点击登录，如忘记密码请找回'
				}
			},
			gologin(){
				var that = this;
				if(!that.check) return false;
				that.check = true;
				if(!that.login.username){
					uni.showToast({
						title:'请输入帐号',
						icon:'none'
					})
					that.check = true;
					return false;
				}
				if(!that.login.password){
					uni.showToast({
						title:'请输入密码',
						icon:'none'
					})
					that.check = true;
					return false;
				}
				setTimeout(function(){
					that.check = true;
				},800);
				that.$http('api/login',that.login,function(res){
					that.check = true;
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					if(res.code===0){
						uni.setStorageSync('token',res.data.token);
						that.$store.commit("hideLogin")
						setTimeout(function(){
							location.reload()
						},1500)
					}
				})
			},
			register(){
				var that = this;
				if(that.codecolor=='3' || !that.check) return false;
				that.check = false;
				if(!that.login.username){
					uni.showToast({
						title:'请输入帐号',
						icon:'none'
					})
					that.check = true;
					return false;
				}
				var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if(!that.login.phone || !reg_tel.test(that.login.phone)){
					uni.showToast({
						title:'请输入正确的手机号',
						icon:'none'
					})
					that.check = true;
					return false;
				}
				if(!that.login.puid){
					uni.showToast({
						title:'请输入推荐人',
						icon:'none'
					})
					return false;
				}
				if(!that.login.password){
					uni.showToast({
						title:'请输入密码',
						icon:'none'
					})
					return false;
				}
				if(that.login.password!=that.login.repassword){
					uni.showToast({
						title:'两次输入密码不一致',
						icon:'none'
					})
					return false;
				}
				
				that.$http('api/register',that.login,function(res){
					that.check = true;
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					if(res.code===0){
						uni.setStorageSync('token',res.data.token);
						that.$store.commit("hideLogin")
						setTimeout(function(){
							location.reload()
						},1500)
					}
				})
			},
			getcode(){
			
				var that = this;
				if(that.codecolor=='3' || !that.check) return false;
				that.check = false;
				if(!that.login.username){
					uni.showToast({
						title:'请输入帐号',
						icon:'none'
					})
					that.check = true;
					return false;
				}
				var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if(!that.login.phone || !reg_tel.test(that.login.phone)){
					uni.showToast({
						title:'请输入正确的手机号',
						icon:'none'
					})
					that.check = true;
					return false;
				}
				
				that.$http('api/getcode',that.login,function(res){
					that.check = true;
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					if(res.code===0){
						that.daojishi()
					}
				})
			},
			daojishi(){
				var that = this;
				setTimeout(function(){
					if(that.init>0){
						that.init--;
						uni.setStorageSync('codes',that.init);
						that.codetxt = '('+that.init+')重获取';
						that.codecolor = '3';
						that.daojishi();
					}else{
						that.codetxt = '重新获取';
						that.codecolor = '2';
					}
				},1000)
			}
		}
	}
</script>

<style lang="scss">
	.login{
		width: 100%;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
		.popup_shadow{
			z-index: 10000;
		}
		&_content{
			width: 100%;
			height: fit-content;
			background-color: #fff;
			border-radius: 20upx 20upx 0 0;
			z-index: 10001;
			position: fixed;
			bottom: 0;
			transition: all ease .3s;
			box-sizing: border-box;
			padding: 50upx 34upx;
			min-height: 500upx;
			&_tab{
				width: 100%;
				margin-bottom: 20upx;
				display: flex;
				align-items: center;
				font-size: 32upx;
				font-weight: 600;
				color: #999;
				line-height: 36upx;
				.active{
					font-size: 36upx;
					font-weight: 700;
					color: #333;
					line-height: 36upx;
				}
				&_line{
					width: 1px;
					height: 34upx;
					background-color: #e4e7ed;
					margin: 0 20upx;
				}
			}
			&_desc{
				font-size: 26upx;
				font-weight: 400;
				color: #c2c7cf;
			}
			&_inpbox{
				display: flex;
				flex-direction: column;
				font-size: 28upx;
				color: #303133;
				line-height: 70upx;
				width: 100%;
				&_account{
					padding: 20upx 0;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					border-bottom: 1px solid #e4e7ed;
					&_title{
						width: 140upx;
						font-size: 30upx;
						color: #333;
						font-weight: 600;
						text-align: left;
					}
					>input{
						min-height: 70upx;
						font-size: 28upx;
						color: #303133;
						flex: 1;
					}
					&_forget{
						width: 160upx;
						line-height: 56upx;
						font-size: 30upx;
						font-weight: 500;
						color: #999;
						text-align: right;
					}
				}
				&_password{
					padding: 20upx 0;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					border-bottom: 1px solid #e4e7ed;
					&_title{
						width: 140upx;
						font-size: 30upx;
						color: #333;
						font-weight: 600;
						text-align: left;
					}
					>input{
						min-height: 70upx;
						font-size: 28upx;
						color: #303133;
						flex: 1;
					}
					&_btn{
						width: 160upx;
						line-height: 56upx;
						background: linear-gradient(90deg,#f44336,#e91e63);
						border-radius: 28upx;
						font-size: 26upx;
						font-weight: 500;
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
				&_password2{
					padding: 20upx 0;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					border-bottom: 1px solid #e4e7ed;
					&_title{
						width: 140upx;
						font-size: 30upx;
						color: #333;
						font-weight: 600;
						text-align: left;
					}
					>input{
						min-height: 70upx;
						font-size: 28upx;
						color: #303133;
						flex: 1;
					}
					&_btn{
						width: 160upx;
						line-height: 56upx;
						background: linear-gradient(90deg,#3b7bf7,#4778ec);
						border-radius: 28upx;
						font-size: 26upx;
						font-weight: 500;
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
				&_password3{
					padding: 20upx 0;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					border-bottom: 1px solid #e4e7ed;
					&_title{
						width: 140upx;
						font-size: 30upx;
						color: #333;
						font-weight: 600;
						text-align: left;
					}
					>input{
						min-height: 70upx;
						font-size: 28upx;
						color: #303133;
						flex: 1;
					}
					&_btn{
						width: 160upx;
						line-height: 56upx;
						background: linear-gradient(90deg,#dadbec,#aaabca);
						border-radius: 28upx;
						font-size: 26upx;
						font-weight: 500;
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
				&_password4{
					padding: 20upx 0;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					border-bottom: 1px solid #e4e7ed;
					&_title{
						width: 500upx;
						font-size: 30upx;
						color: #333;
						font-weight: 600;
						text-align: left;
					}
					>input{
						min-height: 70upx;
						font-size: 28upx;
						color: #303133;
						flex: 1;
					}
					&_btn{
						width: 600upx;
						line-height: 56upx;
						background: linear-gradient(90deg,#f44336,#e91e63);
						border-radius: 28upx;
						font-size: 26upx;
						font-weight: 500;
						color: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						padding:15upx 0upx;
						margin-left: auto;
						margin-right: auto;
					}
				}
			}
			&_bottom{
				margin-top: 40upx;
				margin-bottom: 20upx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26upx;
				font-weight: 500;
				color: #999;
			}
		}
	}
</style>